import React, { Component, forwardRef } from 'react';
import { Toast } from 'antd-mobile';
import ImgCarousel from 'common/components/carousel/ImgCarousel.js';
import * as common from 'common/common.js';
import './GoodsDetail.less';

import SeperateLine from 'common/components/SeperateLine.js';

import * as goodsApi from 'common/api/GoodsApi.js';
import * as userApi from 'common/api/UserApi.js';

/**
 * 商品详情组件
 * @param {goodsImages} 		商品轮播图数据
 * @param {goodsInfo} 			商品描述信息
 * @param {goodsHotComments} 	商品热门评论
 */
class GoodsDetail extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
			goodsTitleActive: 0,
	    	goodsTitle: [
	    		{ name: "商品", type: "goodsTitle" },
	    		{ name: "详情", type: "goodsBody" }
	    	],
	    	goodsImages: [],
				goodsInfo: {},
				goodsHotComments: {
	    		total: "900",
	    		list: [
	    			{
	    				userName: "柠***8",
	    				commentsTime: "2018-06-23",
	    				commentsContent: "东西很好，物流很快，试过加热蛋挞，蒸鱼，烤翅根，启动噪音有点大，可能是瓦数大吧，只要时间掌握好，叮出来的东西还是不错的，总的来说满意，买家电京东值得信赖。"
	    			},
	    			{
	    				userName: "柠***8",
	    				commentsTime: "2018-06-23",
	    				commentsContent: "东西很好，物流很快，试过加热蛋挞，蒸鱼，烤翅根，启动噪音有点大，可能是瓦数大吧，只要时间掌握好，叮出来的东西还是不错的，总的来说满意，买家电京东值得信赖。"
	    			},
	    			{
	    				userName: "柠***8",
	    				commentsTime: "2018-06-23",
	    				commentsContent: "东西很好，物流很快，试过加热蛋挞，蒸鱼，烤翅根，启动噪音有点大，可能是瓦数大吧，只要时间掌握好，叮出来的东西还是不错的，总的来说满意，买家电京东值得信赖。"
	    			},
	    			{
	    				userName: "柠***8",
	    				commentsTime: "2018-06-23",
	    				commentsContent: "东西很好，物流很快，试过加热蛋挞，蒸鱼，烤翅根，启动噪音有点大，可能是瓦数大吧，只要时间掌握好，叮出来的东西还是不错的，总的来说满意，买家电京东值得信赖。"
	    			}
	    		]
	    	}
	    }
	}

	componentDidMount(){
		const { goodsId } = this.props.params;
		Toast.loading("", common.TIPS_LOADING_DURATION);
		goodsApi.goodsDetail({
			goodsId: goodsId
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				var resourceList = result.data.resourceList;
				var goodsImages = [];
				for(var i=0; i<resourceList.length; i++){
					if(resourceList[i].type == "0"){
						goodsImages.push(resourceList[i].url);
					}
				}
				this.setState({
					goodsInfo: result.data,
					goodsImages: goodsImages
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	//加入购物车
	addCart = () => {
		Toast.loading("", common.TIPS_LOADING_DURATION);
		const { goodsInfo } = this.state;
		userApi.addCart({
			memberId: common.userId(),
			goodsId: goodsInfo.id,
			goodsNum: 1
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				Toast.info("加入成功", common.TIPS_INFO_DURATION);
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}

	//订单页面
	gotoOrder = () => {
		Toast.loading("", common.TIPS_LOADING_DURATION);
		const { goodsInfo } = this.state;
		//1.获取收获地址列表
		//2.添加购物车
		userApi.addCart({
			memberId: common.userId(),
			goodsId: goodsInfo.id,
			goodsNum: 1
		}).then(result => {
			if(result.code == common.SUCCESS){
				Toast.hide();
				common.gotoOrderPreview({
					userId: common.userId(),
					cartIds: result.data.id,
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	//锚点滚动
	scrollToType = (name) => {
	    if (name) {
	        let nameElement = document.getElementById(name);
	        if(nameElement) { nameElement.scrollIntoView(); }
	    }
  	}

	render(){
		const { goodsImages, goodsInfo, goodsHotComments } = this.state;
		var content = '<div class="goods_body_content">';
		content += goodsInfo.detail != null ? goodsInfo.detail : "";
		content += '</div>';
		return(
			<div className="goodsDetail">
				{/* 导航 */}
				<div className="goods_top_container">
					<div className="goods_top">
						<div className="left" onClick={()=>common.goBack()}>
							<img src="assets/img/left.png"/>
						</div>
						<div className="content">
						{
							this.state.goodsTitle.map((item, index) => {
								var goodsTitleClass = "tools_item";
								if(index == this.state.goodsTitleActive){
									goodsTitleClass = "tools_item active";
								}
								return(
									<div key={index} className={goodsTitleClass} onClick={() => this.scrollToType(item.type, index)}>
										{item.name}
									</div>	
								)
							})
						}
						</div>
						<div className="right"></div>
					</div>
				</div>
				{/* 商品基本信息  */}
				<div id="goodsTitle">
					<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
					{
						goodsImages.length == 0 &&
						<div className="goodsImagesPreview"></div>
					}
					{
						goodsImages.length > 0 &&
						<ImgCarousel data={goodsImages}></ImgCarousel>
					}
					<div className="goods_title_container">
						<div className="goods_title">
							<p>
								<img src="assets/img/title_tips.png"/>
								{goodsInfo.name}
							</p>
						</div>
						<div className="goods_subtitle">
							<p>
								{goodsInfo.subName}
							</p>
						</div>
						<div className="goods_price">
							<p>
								￥{common.fenToYuan(goodsInfo.price)}
							</p>
						</div>
					</div>
				</div>
				{/* 商品其他描述 */}
				<div className="goods_desc_containerr">
					<div className="list_item">
						<div className="left">
							<span>送至</span>
						</div>
						<div className="content">
							北京朝阳区三环到四环之间
						</div>
						<div className="right">
							<img src="assets/img/dot3.png"/>
						</div>
					</div>
					<div className="list_item">
						<div className="left">
							<span>运费</span>
						</div>
						<div className="content">
							在线支付免运费
						</div>
						<div className="right">
							<img src="assets/img/dot3.png"/>
						</div>
					</div>
				</div>
				<SeperateLine lineHeight={"0.2rem"} bg={"#e8e8ed"}></SeperateLine>
				{/* 商品评论 */}
				{/* <div id="goodsHotComments" className="goods_hot_comments_container">
					<div className="goods_hot_comments_title">
						<div className="left">
							<span>评价</span>
						</div>
						<div className="content"></div>
						<div className="right">
							共 {goodsHotComments.total} 条
						</div>
					</div>
					<div className="goods_hot_comments_content">
					{
						goodsHotComments.list.map((item, index) => {
							return(
								<div key={index} className="comments_item">
									<div className="top">
										<div className="left">
											{item.userName}
										</div>
										<div className="right">
											{item.commentsTime}
										</div>
									</div>
									<div className="bottom">
										{item.commentsContent}
									</div>
								</div>
							)
						})
					}
					</div>
				</div>
				<SeperateLine lineHeight={"0.2rem"} bg={"#e8e8ed"}></SeperateLine> */}
				{/* 商品详情 */}
				<div id="goodsBody" className="goods_body_container">
					<ul className="goods_body_title">
						<li className="active">商品介绍</li>
						{/*<li>售后保障</li>*/}
					</ul>
					<div className="goods_info" dangerouslySetInnerHTML={{
					__html: content
					}}/>
				</div>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				{/* 下单 */}
				<div className="goods_buy_container">
					<div className="left">
						<div className="goods_tools" onClick={()=>common.gotoHome()}>
							<img src="assets/img/menu/main.png"/>
							<span>首页</span>
						</div>
						<div className="goods_tools" onClick={()=>common.gotoUserInfo()}>
							<img src="assets/img/menu/my.png"/>
							<span>我的</span>
						</div>
						<div className="goods_tools" onClick={()=>common.gotoUserCart()}>
							<img src="assets/img/menu/cart.png"/>
							<span>购物车</span>
						</div>
					</div>
					<div className="right">
						<span className="addCart" onClick={this.addCart.bind(this)}>加入购物车</span>
						<span className="buy" onClick={this.gotoOrder.bind(this)}>立即购买</span>
					</div>
				</div>
			</div>
		)
	}
}

export default GoodsDetail;